<template>
    <!-- 导航部分开始 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>主数据</el-breadcrumb-item>
        <el-breadcrumb-item>物料产品分类管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 导航部分结束 -->

    <!--  搜索栏开始 -->
    <!-- //绑定queryItemType[]数组 -->
    <el-form style="margin-top: 15px;" :inline="true" :model="queryItemType" class="demo-form-inline">

        <el-form-item label="分类名称">
            <!-- //传入queryItemType.itemtypeName,queryItemType.itemtypeName -->
            <el-input v-model="queryItemType.itemTypeName" placeholder="请输入物料产品分类名称" clearable />
        </el-form-item>


        <el-form-item label="是否启用">
            <el-select v-model="queryItemType.enableFlag" placeholder="选择是否">
                <el-option label="是" value="Y" />
                <el-option label="否" value="N" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="loadItemType">
                <el-icon>
                    <Search />
                </el-icon>搜索
            </el-button>
            <el-button @click="cleanItemTypes"><el-icon>
                    <Refresh />
                </el-icon>重置</el-button>
        </el-form-item>
    </el-form>
    <!--  搜索栏结束 -->

    <!-- 工具栏开始 -->
    <!-- <div class="flex" style="margin-top: 10px;">
        <el-button title="新增物料产品分类" @click="this.addItemTypeDialogVisible = true" type="primary">
            <el-icon>
                <Plus />
            </el-icon>
            新增
        </el-button>
    </div> -->
    <!-- 工具栏结束 -->

    <!-- 树状表格开始 -->
    <el-table :data="itemTypes" style="width: 100%;margin-bottom: 20px;" row-key="itemTypeId" default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column prop="itemTypeName" label="分类" sortable width="180">
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" sortable width="100">
        </el-table-column>
        <el-table-column prop="itemOrProduct" label="物料/产品">
        </el-table-column>
        <el-table-column prop="enableFlag" label="是否启用">
            <template #default="scope">
                <!-- scope.row 就是整行数据-->
                <el-tag v-if="scope.row.enableFlag == 'Y'" class="ml-2" type="success">是</el-tag>
                <el-tag v-else class="ml-2" type="danger">否</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column width="330" align="center" label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" @click="handleAdd(scope.row)" type="primary" plain>新增</el-button>
                <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                    title="您是否要删除这行数据">
                    <template #reference>
                        <el-button size="small" type="danger">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>


    <!-- 树状表格结束 -->

    <!-- 添加物料产品分类的弹窗窗体开始-->
    <el-dialog v-model="addItemTypeDialogVisible" title="添加物料产品分类" width="600" align-center>
        <!-- 添加物料产品分类的表单 -->


        <el-form label-width="100px" :model="newItemType" style="max-width: 600px">

            <el-row>
                <el-form-item label="父分类">
                    <el-input v-model="newItemType.parentTypeName" disabled />
                </el-form-item>
                <el-col :span="15">
                    <el-form-item label="分类编码">
                        <el-input v-model="newItemType.itemTypeCode" />
                    </el-form-item>
                </el-col>
                <el-form-item label="自动编码">
                    <el-switch v-model="newItemType.itemTypeCode" />
                </el-form-item>
                <el-col :span="12">
                    <el-form-item label="分类名称" tag="b">
                        <el-input type="itemTypeName" v-model="newItemType.itemTypeName" />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="显示排序" tag="b">
                        <el-input-number v-model="newItemType.orderNum" controls-position="right" @change="handleChange"
                            :min="1" :max="100">
                        </el-input-number>
                    </el-form-item>

                </el-col>
                <el-col :span="10">
                    <el-form-item label="物料/产品" tag="b">
                        <el-radio-group v-model="newItemType.itemOrProduct">
                            <el-radio label="物料" :value="物料">物料</el-radio>
                            <el-radio label="产品" :value="产品">产品</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">

                    <el-form-item label="启用状态" tag="b">
                        <el-radio-group v-model="newItemType.enableFlag">
                            <el-radio label="Y" :value="Y">是</el-radio>
                            <el-radio label="N" :value="N">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- <el-text>记录问题:这部分未写: 根据父分类寻找parentld,parent_ type_ id, 保存数据,然后parentld为前面的+1</el-text> -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelAddItemType">取消</el-button>
                <el-button type="primary" @click="doAddItemType">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加物料产品分类的弹窗窗体结束-->

    <!-- 修改物料产品分类的弹窗窗体开始-->
    <el-dialog v-model="itemTypeEditDrawer" title="添加物料产品分类" width="1000" align-center>


        <el-form label-width="100px" :model="editItemType" style="max-width: 600px">

            <el-row>
                <el-form-item label="父分类">
                    <el-input v-model="editItemType.parentTypeName" disabled />
                </el-form-item>
                <el-col :span="15">
                    <el-form-item label="分类编码">
                        <el-input v-model="editItemType.itemTypeCode" />
                    </el-form-item>
                </el-col>
                <el-form-item label="自动编码">
                    <el-switch v-model="editItemType.itemTypeCode" />
                </el-form-item>
                <el-col :span="12">
                    <el-form-item label="分类名称" tag="b">
                        <el-input type="itemTypeName" v-model="editItemType.itemTypeName" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="显示排序" tag="b">
                        <el-input-number v-model="editItemType.orderNum" controls-position="right" @change="handleChange"
                            :min="1" :max="100">
                        </el-input-number>
                    </el-form-item>

                </el-col>
                <el-col :span="10">
                    <el-form-item label="物料/产品" tag="b">
                        <el-radio-group v-model="editItemType.itemOrProduct">
                            <el-radio label="物料" :value="物料">物料</el-radio>
                            <el-radio label="产品" :value="产品">产品</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">

                    <el-form-item label="启用状态" tag="b">
                        <el-radio-group v-model="editItemType.enableFlag">
                            <el-radio label="Y" :value="Y">是</el-radio>
                            <el-radio label="N" :value="N">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelEditItemType">取消</el-button>
                <el-button type="primary" @click="doItemTypeEdit">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 修改物料产品分类的弹窗窗体结束-->
</template>
<script>
import itemtypeRequest from '../../../aip/md/itemType-api.js';

export default {
    data() {
        return {
            itemTypes: [],
            queryItemType: { enableFlag: '' },
            newItemType: { parentId: '1' },
            addItemTypeDialogVisible: false,

            editItemType: {},
            itemTypeEditDrawer: false,



        }
    },
    methods: {
        /**
 * 加载所有的物料分类，默认情况下， 如果物料分类集合已经存在，就不加载，如果不存在才加载
 * @param {*} isReal true，表示不做判断， 重新加载
 */
        loadItemTypes() {
            itemtypeRequest.getAll(res => {
                this.itemTypes = res.data;
            });
        },
        // 重置清空
        cleanItemTypes() {
            this.queryItemType = '';
        },
        loadItemType() {
            //axios调用
            console.log(this.queryItemType);
            itemtypeRequest.list(this.queryItemType, res => {
                if (this.queryItemType.enableFlag != '' && this.queryItemType.itemTypeName != '') {
                    this.itemTypes = res.data;
                } else {
                    this.loadItemTypes();
                }

            });
        },
        handleAdd(row) {
            this.addItemTypeDialogVisible = true;
            console.log(row);

            itemtypeRequest.get(row.itemTypeId, res => {
                console.log(res.data);
                console.log(res.data.itemTypeName);
                this.newItemType.parentTypeName = res.data.itemTypeName;
                this.newItemType.parentTypeId = res.data.itemTypeId;
                this.newItemType.parentId = 1;
                console.log(this.newItemType);
            });
        },

        doAddItemType() {
            console.log(this.newItemType);
            // 物料产品分类数据 this.newItemType


            itemtypeRequest.saveItemType(this.newItemType, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '添加物料产品分类成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.addItemTypeDialogVisible = false;
                    // 重新加载数据
                    this.loadItemTypes();
                    // 将newItemType制空
                    this.newItemType = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '物料产品分类名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error',
                    });
                }
            });
        },
        handleChange(value) {
            console.log(value);
        },


        /**
        * 行编辑按钮事件
        * @param {*} row 整行数据 
        */
        handleEdit(row) {
            // 显示抽屉弹窗
            console.log(this.editItemType.enableFlag);
            // 通过id加载要编辑的物料产品分类信息
            itemtypeRequest.get(row.itemTypeId, res => {
                this.editItemType = res.data;
                console.log(this.editItemType.enableFlag);
                // 显示抽屉弹窗 
                this.itemTypeEditDrawer = true;

                this.editItemType.parentTypeName = res.data.itemTypeName;
                console.log(this.editItemType);
            });
        },
        /**
            * 物料产品分类编辑提交按钮事件
            */
        doItemTypeEdit() {
            // 提交editItemType即可
            itemtypeRequest.edit(this.editItemType, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑物料产品分类成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.itemTypeEditDrawer = false;
                    // 重新加载数据
                    this.loadItemTypes();
                    // 将editItemType制空
                    this.editItemType = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '物料产品分类名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },





        /**
 * 行编辑按钮事件
 * @param {*} row 整行数据
 */
        handleDelete(row) {
            itemtypeRequest.delete(row.itemTypeId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadItemTypes();
                    console.log("删除成功")
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },


    },
    mounted() {
        this.loadItemTypes();
    }

}
</script>

<style scoped></style>